vue项目中使用vueQr和qrcodejs2生成二维码和下载功能

您所在的位置：网站首页 › vue qrcode生成二维码 › vue项目中使用vueQr和qrcodejs2生成二维码和下载功能

vue项目中使用vueQr和qrcodejs2生成二维码和下载功能

2023-08-08 06:56| 来源: 网络整理| 查看: 265

生成二维码的插件有两个分别是qrcodejs2和vueQr,vueQ生成的二维码中间可以放头像

本项目是vueQr,搭配el-table一起使用

下载依赖包 cnpm install vue-qr --save

页面引入 import vueQr from "vue-qr";

components: { vueQr },

页面结构

//text扫码获取的内容

属性说明:

在这里插入图片描述 downloadImg() 生成二维码之后下载的方法

downloadImg(link_id, name) { console.log(link_id, name); const iconUrl = this.$refs["Qrcode" + link_id].$el.src; //console.log(iconUrl, "iconUrl"); this.downloadFile(name, iconUrl); }, downloadFile(fileName, content) { let aLink = document.createElement("a"); let blob = this.base64ToBlob(content); //new Blob([content]); let evt = document.createEvent("HTMLEvents"); // console.log("点击下载", evt); evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错事件类型，是否冒泡，是否阻止浏览器的默认行为 aLink.download = fileName; //图片的名称 aLink.href = URL.createObjectURL(blob); // aLink.dispatchEvent(evt); aLink.click(); // 下载完成之后移除a的事件 document.body.removeChild(aLink); }, // base64转换blob base64ToBlob(code) { let parts = code.split(";base64,"); let contentType = parts[0].split(":")[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i type: contentType }); },

最后效果在这里插入图片描述

qrcodejs2只是简单做的Demo,也能生成二维码.只是下载有点麻烦最后采用的是vueQr

生成二维码方法

qrcode() { let mdcode = this.property[0].mdcode == null ? "" : this.property[0].mdcode; let reg = /[0-9]+/g; let projectId = parseInt(this.path); let name = this.path.replace(reg, ""); let drid = this.property[0].drid; let drname = this.property[0].drname; let drtypename = this.property[0].drtypename; new QRCode("qrcode", { width: 232, // 设置宽度 height: 232, // 设置高度 text: `设备编号: ${mdcode},项目ID: ${projectId},项目名: ${name},设备ID: ${drid},设备名称: ${drname},设备类型: ${drtypename}`, }); }, // 生成二维码 createQRcode() { if (this.property.length != 1) { this.$message.error("选择设备资产数量超过1或者未选择设备资产！"); } else { let qrcode = document.getElementById("qrcode"); qrcode.innerHTML = ""; this.$nextTick(function () { this.qrcode(); }); } },

【本文地址】

vue项目中使用vueQr和qrcodejs2生成二维码和下载功能

vue项目中使用vueQr和qrcodejs2生成二维码和下载功能

今日新闻

推荐新闻